.query-results-export {
  .export-nav {
    height: 50px;
    position: relative;
    border-bottom: 1px solid darken(@theme-query-result-export-border, 18%);
    padding-bottom: 15px;
    margin-bottom: 15px;
    .border-line {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1px;
      width: 100%;
      background: lighten(@theme-modal-content-bg, 6%);
    }
    .btns {
      .btn-group {
        margin-right: 10px;
        &.first {
          margin-left: 0;
        }
      }
      .export-btn-list {
        margin-left: 0;
        padding: 0;
        .form-control {
          display: inline-block;
          min-width: 60px;
        }
        .btn {
          display: inline-block;
          border-radius: @border-radius-base;
          .number-input {
            width: 50px;
          }
          &.active {

          }
        }
      }
    }
  }
  .export-progress {
    width: 100%;
  }
  .key-value-pairs {
    .alert {
      max-width: 500px;
      margin: 0 auto;
    }
    .sortable-placeholder {
      position: relative;
      height: 50px;
      border: 1px dashed @theme-query-result-export-border;
      width: 100%;
      border-radius: 4px;
      margin-bottom: 15px;
      &::after {
        width: 100%;
        height: 100%;
        position: absolute;
        text-align: center;
        content: "Drop Here";
        font-style: italic;
        left: 0;
        top: 0;
        padding-top: 15px;
      }
    }
    .key-value-pair {
      border-radius: 4px;
      border: 1px dashed @theme-query-result-export-border;
      padding: 5px;
      margin-bottom: 15px;
      position: relative;
      overflow: hidden;
      &:hover {
        border: 1px solid lighten(@theme-query-result-json-border-color, 30%);
        .drag-handle {
          display: block;
        }
        .menu {
          top: -1px;
        }
      }
      &.ui-sortable-helper {
        background: red;
      }
      .drag-handle {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 15px;
        cursor: move;
        border-right: 1px dashed lighten(@theme-query-result-json-border-color, 30%);

        // background: fade(@theme-modal-content-bg, 20%);
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        .dots {
          display: block;
          margin: 0 auto;
          transform: translateY(50%);
          position: relative;
          top: 17%;
          width: 9px;
          .left-dots {
            float: left;
          }
          .right-dots {
            float: right;
          }
          .fa {
            font-size: 3px;
            display: block;
            margin-bottom: 4px;
            color: @theme-text-color;
          }
        }
      }
      .menu {
        z-index: 1;
        .btn-hover-menu();
      }
      .form-group {
        margin: 0 0 10px;
        &:last-child {
          margin-bottom: 0;
        }
        .left-col {
          padding-left: 0;
          text-align: right;
        }
        .right-col {
          padding-right: 0;
        }
      }
    }
  }
}
